<script setup lang="ts">
import { LOGIN_TOKEN } from '@/global/constants'
import router from '@/router'
import { localCache } from '@/utils/cache'

const handleExitSystemClick = () => {
  localCache.removeCache(LOGIN_TOKEN)
  router.push('/login')
}
</script>
<template>
  <div class="header-info">
    <!-- 图标 -->
    <div class="headerinfo-left">
      <div class="left-item">
        <el-icon size="18px"><Bell /></el-icon>
      </div>
      <div class="left-item">
        <el-icon size="18px"><ChatDotRound /></el-icon>
      </div>
      <div class="left-item">
        <el-badge is-dot>
          <el-icon size="18px"><MessageBox /></el-icon>
        </el-badge>
      </div>
    </div>
    <div class="headerinfo-right">
      <!-- 头像 -->
      <el-dropdown>
        <span class="el-dropdown-link">
          <el-avatar
            class="img-avatar"
            :size="28"
            src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
          />
          <span class="right-name"> nickname</span>
        </span>

        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="handleExitSystemClick">
              <el-icon><SwitchButton /></el-icon>
              退出系统
            </el-dropdown-item>
            <el-divider />
            <el-dropdown-item>
              <el-icon><InfoFilled /></el-icon>
              个人信息
            </el-dropdown-item>
            <el-dropdown-item>
              <el-icon><Edit /></el-icon>
              修改密码
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>
<style scoped lang="less">
.header-info {
  display: flex;
  justify-content: center;
  align-items: center;
  .headerinfo-left {
    display: flex;
    justify-content: center;
    align-items: center;
    .left-item {
      padding: 10px;
      border-radius: 5px;
      cursor: pointer;
      &:hover {
        background-color: #f2f2f2;
      }
    }
  }
  .headerinfo-right {
    margin-left: 5px;
    .el-dropdown-link {
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      .img-avatar {
      }
      .right-name {
        padding: 0 5px;
      }
    }
  }
}
.el-dropdown-menu__item {
  line-height: 35px;
}
.el-divider--horizontal {
  margin: 0;
}
</style>
